import "./custom_table.scss";

import React, { useEffect, useRef, useState } from "react";
import { Table, TableProps } from "antd";

interface CustomCSSProperties extends React.CSSProperties {
  [key: `--${string}`]: string | number;
}

function CustomTable(Props: TableProps) {
  const componentRef = useRef<HTMLDivElement>(null);
  const [listHeight, setListHeight] = useState(0);

  const listHeightTheme: CustomCSSProperties = {
    "--list-height": listHeight + "px",
  };

  const antPagination = document.querySelector(".ant-pagination");
  const antTableHeader = document.querySelector(".ant-table-header");
  const resizeListHeight = () => {
    const antPaginationHeight = antPagination?.clientHeight || 0;
    const scrollTableHeight = componentRef.current?.offsetHeight || 0;
    const antTableHeaderHeaderHeight = antTableHeader?.clientHeight || 0;

    setListHeight(
      scrollTableHeight - antPaginationHeight - antTableHeaderHeaderHeight,
    );
  };

  useEffect(() => {
    resizeListHeight();
    window.addEventListener("resize", resizeListHeight);
    return () => {
      window.removeEventListener("resize", resizeListHeight);
    };
  }, [antPagination,antTableHeader]);

  return (
    <div ref={componentRef} className={"custom_table"} style={listHeightTheme}>
      <Table
        {...Props}
        scroll={{ y: 100 }}
        pagination={{
          size: "small",
          position: ["bottomLeft"],
          showQuickJumper: true,
          defaultPageSize: 20,
          pageSizeOptions: ["20", "50", "100"],
          showSizeChanger:{
            optionRender:(option) => {
              return (
                <span style={{color:'black'}}>
                {option.data.value}
              </span>
              )
            },
            labelRender:(option)=>(
              <span>
                {option.value}
              </span>
            )

          },
          ...Props.pagination,
        }}
      ></Table>
    </div>
  );
}

export default CustomTable;
